<template>
    <div class="home">
        <el-carousel indicator-position="outside" type="card">
            <el-carousel-item v-for="(item, i) in imgList" :key="i">
                <div class="img">
                    <span>{{ item }}</span>
                </div>
            </el-carousel-item>
        </el-carousel>
        <div class="test">
            <p>我只是个测试</p>
            <el-divider></el-divider>
            <el-button type="primary" @click="server">服务测试</el-button>
            <el-button type="primary" @click="load">加载</el-button>
            <el-button type="primary" @click="alert">弹窗</el-button>            
            <el-button type="primary" @click="drawer = true">抽屉</el-button>
            <el-switch
                v-model="value"
                inactive-color="#ff4949">
            </el-switch>
        </div>
        <!-- <div class="test">
            <p>父子组件通信</p>
             <Child1
                :p-child1="child1"
                :p-child2="child2"
                @test1="onTest1" 
                @test2="onTest2"> 
            </Child1>
        </div> -->
        <template class="Model">
            <el-drawer  
                title="我只是个抽屉"
                :visible.sync="drawer"
                direction="rtl"
            >
                <span>我只是个抽屉辣</span>
            </el-drawer>            
        </template>
    </div>
</template>

<script>
import Child1 from './Child1.vue';
export default {
    name: "Home",
    data () {
        return {
            imgList: ['今', '日', '无', '事', '发', '生'],
            value: true,
            drawer: false,
            child1: 'child1',
            child2: 'child2'
        }
    },
    components: {
        Child1
    },
    mounted () {
        
    },
    methods: {
        server(){
            this.$loading();
            this.$axios.post(Huiyan.Login, {
                jsondt: {}
            }).then((data) => {
                if (data.zt == '1') {
                    this.$message({
                        message: '请求完了',
                        type: 'success'
                    });
                } else {
                    this.$message.error('请求失败了');
                }
                this.$loaded();
            })
        },
        load(){
            this.$loading();
            setTimeout(() => {
                this.$loaded();
            }, 2000);
        },
        alert(){
            // this.$alert('我只是个弹窗', '弹窗' ,{
            //     confirmButtonText: '确定'
            // }).then(()=>{
            //     this.$message('我只是条消息提示');
            // })
            this.$confirm('我只是个弹窗', '弹窗' ,{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(()=>{
                this.$message({
                    message: '我只是个成功消息',
                    type: 'success'
                });
            }).catch(()=>{
                this.$message({
                    message: '我只是个警告消息',
                    type: 'warning'
                });
            })
        },
        onTest1 () {
            console.log('test1 running...');
        },
        onTest2 () {
            console.log('test2 running');
        }
    },
    provide(){
        return{
            c1: 'c1',
            c2: (c2)=>{
                console.log(c2);
                return c2
            }
        }
    }
}
</script>

<style lang="less" scoped>
.home{
    width: 100%;
    padding-bottom: 50px;  
    
    .el-carousel__item {
        background-color: #d3dce6;
        .img{
            position: relative;
            width: 100%;
            height: 100%;
            span{
                position: absolute;
                display: inline-block;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-size: 50px;
            }
        }
    }
    
    .test{
        height: 300px;
        background-color: #fff;
        border-radius: 4px;
        margin: 50px 0;
        padding: 20px;

        .el-switch{
            margin-left: 15px;
        }
    }
}

</style>